<template>
	<!-- 单个专题自定义组件 -->
	<view class="datum line">
		<!-- 图片标题 -->
		<view class="top fboxCol" @tap="pageto">
			<image class="avatarImg" :src="innerData.img" mode="widthFix"></image>
			<view class="fboxRow Ycenter">
				<view class="title flex1 fboxCol Xbetween font22 color-36363A font28">{{innerData.specialSubjectName}}
				</view>
				<!-- 价格 -->
				<block v-if="layoutType != 2">
					<view v-if="layoutType == 0 || layoutType == 2" class="fboxRow Ycenter price-box">
						<view v-if="innerData.valuation != 1" class="font24" style="color: #E85531;">
							{{innerData.price == 0 ? '免费' : '￥'+innerData.price}}</view>
						<view v-else class="fboxRow Ycenter">
							<view class="color-969699 font20" style="text-decoration:line-through">￥{{innerData.price}}
							</view>
							<view class="font24" style="margin-left: 10rpx; color: #E85531;">
								{{innerData.vipPrice == 0 ? 'VIP免费': 'VIP￥'+innerData.vipPrice}}
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="footer fboxRow Xbetween">
			<!-- 记录 -->
			<view class="font22 color-9899A1 flex1" v-if="layoutType == 0">
				<text class="bksCIcon bks-c-ziyuan16weishoucang font22"></text>
				<text style="margin: 0 29rpx 0 7rpx">{{innerData.collectNum || 0}}</text>
				<text class="bksCIcon bks-c-ziyuan35chakan font22"></text>
				<text style="margin: 0 29rpx 0 7rpx">{{innerData.viewNum || 0}}</text>
			</view>
			<view class="color-969699" :class="layoutType == 1 ? 'font24' : 'font22'"
				v-if="layoutType == 1 || layoutType == 0">{{innerData.gmtModified}}</view>
			<!-- 价格 -->
			<block v-if="layoutType == 2">

				<view v-if="layoutType == 0 || layoutType == 2" class="fboxRow Ycenter price-box"
					:class="layoutType == 2 ? 'flex1' : ''">
					<view v-if="innerData.valuation != 1" class="font24" style="color: #E85531;">
						{{innerData.price == 0 ? '免费' : '￥'+innerData.price}}</view>
					<view v-else class="fboxRow Ycenter">
						<view class="color-969699 font20" style="text-decoration:line-through">￥{{innerData.price}}
						</view>
						<view class="font24" style="margin-left: 10rpx; color: #E85531;">
							{{innerData.vipPrice == 0 ? 'VIP免费': 'VIP￥'+innerData.vipPrice}}
						</view>
					</view>
				</view>
			</block>
			<!-- 收藏 -->
			<view v-if="layoutType == 2">
				<text @tap="onCollect(innerData, index, false)"
					class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" />
				<!-- <text v-if="!innerData.isCollected" @tap="onCollect(info, index, true)" class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36" />
			<text v-else @tap="onCollect(info, index, false)" class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36" /> -->
			</view>
		</view>
		<view class="l-after"></view>
	</view>
</template>

<script>
	import {
		datumCollectionView
	} from '@/api/bks.datum.js';
	export default {
		props: {
			layoutType: {
				type: [Number, String],
				default: 0 // 0 首页列表 | 1  | 2收藏
			},
			// 当前项数据
			innerData: {
				type: Object,
				default: () => {
					return {
						"collectNum": 0,
						"gmtCreate": "",
						"img": "",
						"introduction": "",
						"isCollected": false,
						"price": 0,
						"remark": "",
						"specialSubjectId": "",
						"specialSubjectName": "",
						"valuation": "",
						"viewNum": 0,
						"vipPrice": 0
					}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {}
		},
		onLoad(option) {

		},
		methods: {
			pageto() {
				const {
					isDelete,
					isBan,
					specialSubjectId
				} = this.innerData
				if (isDelete == 1) {
					uni.showToast({
						title: '专题已被删除',
						icon: 'none'
					})
				} else if (isBan == 1) {
					uni.showToast({
						title: '专题已被下架',
						icon: 'none'
					})
				} else {
					this.getView(specialSubjectId)
					this.$pageTo('/bks/datum/topic/index', {
						id: specialSubjectId,
						back: 1
					})
				}
			},
			// 浏览数量
			getView(specialSubjectId) {
				const params = {
					eventType: 0, // 事件类型0 浏览 1 收藏
					operationType: 1, //  操作类型 0 收藏 1 取消收藏 
					specialSubjectId: specialSubjectId
				}
				datumCollectionView(params).then(res => {})
			},
			onCollect(info, index, status) {
				this.$emit('collect', {
					info,
					index,
					status
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.datum {
		padding: 30rpx 0;
		margin: 0 30rpx;
	}

	.datum .top {
		position: relative;
	}

	.datum .avatarImg {
		width: 690rpx;
		min-height: 340rpx;
		max-height: 800rpx;
		border-radius: 16rpx;
		border: 1px solid #f0f0f5;
		overflow: hidden;
	}

	.datum .title {
		margin-top: 10rpx;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 2;
	}

	.datum .footer {
		margin-top: 6rpx;
		overflow: hidden;
	}
</style>